<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div class="row row-sm">
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="bottom">
					<span class="badge bg-info m-l-sm m-b-sm">03:20</span>
				</div>
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#"><i class="icon-control-play i-2x"></i></a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right"> <i class="fa fa-heart-o"></i>
						</a> <a href="#"> <i class="fa fa-plus-circle"></i>
						</a>
					</div>
				</div>
				<a href="#"><img src="images/p1.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Tempered Song</a> <a href="#"
					class="text-ellipsis text-xs text-muted">Miaow</a>
			</div>
		</div>
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay opacity r r-2x bg-black active">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star-o text-muted"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#" data-toggle="class"> <i
							class="icon-control-play i-2x text"></i> <i
							class="icon-control-pause i-2x text-active"></i>
						</a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right active" data-toggle="class"> <i
							class="fa fa-heart-o text"></i> <i
							class="fa fa-heart text-active text-danger"></i>
						</a> <a href="#" data-toggle="class"> <i
							class="fa fa-plus-circle text"></i> <i
							class="fa fa-check-circle text-active text-info"></i>
						</a>
					</div>
				</div>
				<a href="#"><img src="images/p2.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Vivamus vel tincidunt libero</a> <a
					href="#" class="text-ellipsis text-xs text-muted">Lauren Taylor</a>
			</div>
		</div>
	</div>
	<div class="clearfix visible-xs"></div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#"><i class="icon-control-play i-2x"></i></a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right"> <i class="fa fa-heart-o"></i>
						</a> <a href="#"> <i class="fa fa-plus-circle"></i>
						</a>
					</div>
				</div>
				<a href="#"><img src="images/p3.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Morbi id neque quam liquam
					sollicitudin</a> <a href="#" class="text-ellipsis text-xs text-muted">Allen
					JH</a>
			</div>
		</div>
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#"><i class="icon-control-play i-2x"></i></a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right"> <i class="fa fa-heart-o"></i>
						</a> <a href="#"> <i class="fa fa-plus-circle"></i>
						</a>
					</div>
				</div>
				<div class="top">
					<span class="pull-right m-t-n-xs m-r-sm text-white"> <i
						class="fa fa-bookmark i-lg"></i>
					</span>
				</div>
				<a href="#"><img src="images/p4.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Tincidunt libero</a> <a href="#"
					class="text-ellipsis text-xs text-muted">Amanda Conlan</a>
			</div>
		</div>
	</div>
	<div class="clearfix visible-xs"></div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#"><i class="icon-control-play i-2x"></i></a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right"> <i class="fa fa-heart-o"></i>
						</a> <a href="#"> <i class="fa fa-plus-circle"></i>
						</a>
					</div>
				</div>
				<a href="#"><img src="images/p5.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Fermentum diam</a> <a href="#"
					class="text-ellipsis text-xs text-muted">Nisa Colen</a>
			</div>
		</div>
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="top">
					<span class="pull-right m-t-sm m-r-sm badge bg-info">6</span>
				</div>
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#"><i class="icon-control-play i-2x"></i></a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right"> <i class="fa fa-heart-o"></i>
						</a> <a href="#"> <i class="fa fa-plus-circle"></i>
						</a>
					</div>
				</div>
				<a href="#"><img src="images/p6.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Habitant</a> <a href="#"
					class="text-ellipsis text-xs text-muted">Dan Doorack</a>
			</div>
		</div>
	</div>
	<div class="clearfix visible-xs"></div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#"><i class="icon-control-play i-2x"></i></a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right"> <i class="fa fa-heart-o"></i>
						</a> <a href="#"> <i class="fa fa-plus-circle"></i>
						</a>
					</div>
				</div>
				<div class="top">
					<span class="pull-right m-t-sm m-r-sm badge bg-white">12</span>
				</div>
				<a href="#"><img src="images/p7.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Vivamus vel tincidunt libero</a> <a
					href="#" class="text-ellipsis text-xs text-muted">Ligula H</a>
			</div>
		</div>
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#"><i class="icon-control-play i-2x"></i></a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right"> <i class="fa fa-heart-o"></i>
						</a> <a href="#"> <i class="fa fa-plus-circle"></i>
						</a>
					</div>
				</div>
				<a href="#"><img src="images/p8.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Aliquam sollicitudin venenati</a>
				<a href="#" class="text-ellipsis text-xs text-muted">James East</a>
			</div>
		</div>
	</div>
	<div class="clearfix visible-xs"></div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#"><i class="icon-control-play i-2x"></i></a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right"> <i class="fa fa-heart-o"></i>
						</a> <a href="#"> <i class="fa fa-plus-circle"></i>
						</a>
					</div>
				</div>
				<a href="#"><img src="images/p9.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Lementum ligula vitae</a> <a
					href="#" class="text-ellipsis text-xs text-muted">Lauren Taylor</a>
			</div>
		</div>
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay r r-2x bg-light dker active">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#" data-toggle="class" class="active"> <i
							class="icon-control-play i-2x text"></i> <i
							class="icon-control-pause i-2x text-active"></i>
						</a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right" data-toggle="class"> <i
							class="fa fa-heart-o text"></i> <i
							class="fa fa-heart text-active text-danger"></i>
						</a> <a href="#" class="active" data-toggle="class"> <i
							class="fa fa-plus-circle text"></i> <i
							class="fa fa-check-circle text-active text-info"></i>
						</a>
					</div>
				</div>
				<a href="#"><img src="images/p10.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Egestas dui nec fermentum </a> <a
					href="#" class="text-ellipsis text-xs text-muted">Chris Fox</a>
			</div>
		</div>
	</div>
	<div class="clearfix visible-xs"></div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#"><i class="icon-control-play i-2x"></i></a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right"> <i class="fa fa-heart-o"></i>
						</a> <a href="#"> <i class="fa fa-plus-circle"></i>
						</a>
					</div>
				</div>
				<a href="#"><img src="images/p11.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Aliquam sollicitudin venenatis
					ipsum</a> <a href="#" class="text-ellipsis text-xs text-muted">Jack
					Jason</a>
			</div>
		</div>
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="text-info padder m-t-sm text-sm">
						<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star"></i> <i class="fa fa-star"></i> <i
							class="fa fa-star-o text-muted"></i>
					</div>
					<div class="center text-center m-t-n">
						<a href="#"><i class="icon-control-play i-2x"></i></a>
					</div>
					<div class="bottom padder m-b-sm">
						<a href="#" class="pull-right"> <i class="fa fa-heart-o"></i>
						</a> <a href="#"> <i class="fa fa-plus-circle"></i>
						</a>
					</div>
				</div>
				<a href="#"><img src="images/p12.jpg" alt=""
					class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="#" class="text-ellipsis">Vestibulum ullamcorper</a> <a
					href="#" class="text-ellipsis text-xs text-muted">MM &amp; DD</a>
			</div>
		</div>
	</div>
</div>
